<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			#box {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			
			#box iframe {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			.ceng-box {
				position: absolute;
				left: 50%;
				top: 0;
				margin-left: -132px;
				background: rgba(107, 196, 252, 0.7);
				z-index: 10;
				height: 66px;
				padding: 0 10px;
			}
			
			.ceng-title {
				font-size: 14px;
				color: #fff;
				height: 25px;
				line-height: 25px;
			}
			
			.ceng-wrap {
				display: flex;
			}
			
			.ceng-list {
				white-space: nowrap;
				display: flex;
				height: 45px;
			}
			
			.ceng-item {
				white-space: initial;
				text-align: center;
				line-height: 17px;
				width: 35px;
				height: 35px;
				overflow: hidden;
				background-color: #fff;
				margin-right: 10px;
				border: 1px solid #9e99b9;
			}
			
			.ceng-item.ac {
				color: #fff;
				background-color: rgba(107, 196, 252, 0.7);
			}
			
			.ceng-add {
				text-align: center;
				width: 35px;
				height: 35px;
				line-height: 17px;
				background-color: #fff;
				border: 1px solid #9e99b9;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<!--图层的展示与添加图层-->
			<div class="ceng-box">
				<div class="ceng-title">图层管理</div>
				<div class="ceng-wrap">
					<div class="ceng-list">

					</div>
					<div class="ceng-add" onclick="addiframe()">添加图层</div>
					<div class="ceng-add" onclick="deliframe()">删除图层</div>
				</div>

			</div>
		</div>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/layui/layui.all.js"></script>
		<script>
			// 看看有没有储存的 层列表
			var cenglist = localStorage.getItem("cenglist");
			if(cenglist) {
				// 有渲染
			} else {
				//没有 默认地图展示
			}

			// 删除图层
			var  $cenglist=$(".ceng-list");
			var  $box=$("#box");
			function deliframe() {
				var texts = $cenglist.find(".ceng-item.ac").text();
				var index = $cenglist.find(".ceng-item.ac").index();
				if(index < 0) {
					return;
				}
				layer.confirm("确认删除" + texts + "图层吗", function(ix) {
					$cenglist.find(".ceng-item").eq(index).remove();
					$box.find("iframe").eq(index).remove();
					$cenglist.find(".ceng-item").eq(0).addClass("ac");
					$box.find("iframe").eq(0).show();
					layer.close(ix);
				})
			}

			//新增图层
			function addiframe() {

				layer.prompt({
					title: "新增图层的名称"
				}, function(value, index) {
					var obj = document.createElement("iframe");
					obj.src = "index.html";
					obj.id = "iframe" + $cenglist.find(".ceng-item").length;
					$cenglist.find(".ceng-item.ac").removeClass("ac");
					$cenglist.append('<div class="ceng-item ac">' + value + '</div>');
					$box.find("iframe").hide();
					$box.append(obj);
					layer.close(index);
				})

			}
			$cenglist.on("click", ".ceng-item", function() {
				var index = $(this).index();
				$(this).addClass("ac").siblings().removeClass("ac");
				$box.find("iframe").hide().eq(index).show();
			})
		</script>
	</body>

</html>